<template>
	<view class="post-item" @click="handleClick">
		<!-- 帖子图片 -->
		<view class="post-image">
			<!-- 优先显示封面图片，如果没有则显示第一张帖子图片 -->
			<image v-if="getDisplayImage()" :src="getDisplayImage()" mode="widthFix" @load="onImageLoad"
				@error="onImageError" />
			<!-- 如果没有任何图片，显示默认图片 -->
			<view v-else class="gradient-image"></view>

			<!-- 如果有多张图片，显示图片数量标识 -->
			<view v-if="getImageCount() > 1" class="image-count">
				<uni-icons type="images" color="#fff" size="12"></uni-icons>
				<text class="count-text">{{ getImageCount() }}</text>
			</view>
		</view>

		<!-- 帖子信息 -->
		<view class="post-info">
			<!-- 标题 -->
			<view class="post-title">{{ post.postTitle || '无标题' }}</view>

			<!-- 内容预览 -->
			<view class="post-content">{{ getContentPreview(post.postContent) }}</view>

			<!-- 统计信息 -->
			<view class="post-stats">
				<!-- 创建人信息 -->
				<view class="creator-info">
					<!-- 创建人头像 - 使用动态获取的用户头像 -->
					<image class="creator-avatar" :src="userAvatar" mode="aspectFill" @error="onAvatarError" />
					<text class="creator-label"></text>
					<text class="creator-name">{{ userInfo?.nickName || post.createdBy || '未知' }}</text>
				</view>

				<!-- 点赞信息 -->
				<view class="like-info">
					<view class="stat-item">
						<uni-icons :type="isLiked ? 'heart-filled' : 'heart'" :color="isLiked ? '#ff4757' : '#666'"
							size="16"></uni-icons>
						<text class="count">{{ localLikeCount || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits, computed, ref, watch, onMounted } from 'vue'
	import type { PostBasicInfo } from '@/api/post/post'
	import { usePostStore } from '@/store/modules/post'
	import { getUserInfoByUserId } from '@/api/user/user'

	// 使用 Pinia store
	const postStore = usePostStore()

	// Props定义
	interface Props {
		post ?: PostBasicInfo
		width : number
	}

	const props = withDefaults(defineProps<Props>(), {
		post: () => ({} as PostBasicInfo),
		width: 150
	})

	// 本地点赞数状态
	const localLikeCount = ref(0)

	// 用户信息状态
	const userInfo = ref<any>(null)
	const userAvatar = ref() // 默认头像

	// 获取用户信息的方法
	const fetchUserInfo = async () => {
		if (props.post?.authorUserId) {
			try {
				const response = await getUserInfoByUserId(props.post.authorUserId)
				if (response && response.data) {
					userInfo.value = response.data
					// 如果用户有头像，使用用户头像，否则使用默认头像
					userAvatar.value = response.data.avatar 
				}
			} catch (error) {
				console.error('获取用户信息失败:', error)
			}
		}
	}

	// 组件挂载时获取用户信息
	onMounted(() => {
		fetchUserInfo()
	})

	// 监听post变化，重新获取用户信息
	watch(() => props.post?.authorUserId, () => {
		fetchUserInfo()
	}, { immediate: true })

	// 初始化本地点赞数
	watch(() => props.post?.likeCount, (newCount) => {
		if (newCount !== undefined) {
			localLikeCount.value = newCount
		}
	}, { immediate: true })

	// 计算属性：根据store中的userLikedPostIds判断是否点赞
	const isLiked = computed(() => {
		if (!props.post?.id) return false
		const postId = Number(props.post.id)
		return postStore.isPostLiked(postId)
	})

	// 监听点赞状态变化，同步更新点赞数
	watch(isLiked, (newLiked, oldLiked) => {
		if (oldLiked !== undefined && newLiked !== oldLiked) {
			if (newLiked) {
				// 从未点赞变为已点赞
				localLikeCount.value++
			} else {
				// 从已点赞变为未点赞
				localLikeCount.value = Math.max(0, localLikeCount.value - 1)
			}
			console.log(`帖子 ${props.post?.id} 点赞数更新为: ${localLikeCount.value}`)
		}
	})

	// 事件定义
	const emit = defineEmits<{
		click : [post: PostBasicInfo]
	}>()

	// 方法
	const handleClick = () : void => {
		emit('click', props.post)
	}

	// 获取要显示的图片URL
	const getDisplayImage = () : string => {
		// 优先使用封面图片
		if (props.post?.coverImage) {
			return props.post.coverImage
		}

		// 如果没有封面图片，尝试从postImages中获取第一张
		if (props.post?.postImages) {
			try {
				const images = JSON.parse(props.post.postImages)
				if (Array.isArray(images) && images.length > 0) {
					// 按order排序，取第一张
					const sortedImages = images.sort((a, b) => (a.order || 0) - (b.order || 0))
					return sortedImages[0].url
				}
			} catch (error) {
				console.error('解析postImages失败:', error)
			}
		}

		// 如果都没有，尝试从内容中提取图片（兼容旧数据）
		if (props.post?.postContent) {
			const imgRegex = /<img[^>]+src="([^"]+)"/
			const match = props.post.postContent.match(imgRegex)
			if (match) {
				return match[1]
			}
		}

		// 都没有则返回空字符串，显示默认样式
		return ''
	}

	// 获取图片总数
	const getImageCount = () : number => {
		if (props.post?.postImages) {
			try {
				const images = JSON.parse(props.post.postImages)
				if (Array.isArray(images)) {
					return images.length
				}
			} catch (error) {
				console.error('解析postImages失败:', error)
			}
		}
		return 0
	}

	// 获取内容预览（去除HTML标签）
	const getContentPreview = (content : string) : string => {
		if (!content) return ''
		// 去除HTML标签
		const textContent = content.replace(/<[^>]*>/g, '')
		// 限制长度
		return textContent.length > 50 ? textContent.substring(0, 50) + '...' : textContent
	}

	// 图片加载完成
	const onImageLoad = () => {
		// 图片加载完成后可以做一些处理
	}

	// 图片加载失败
	const onImageError = () => {
		// 图片加载失败的处理
		console.log('图片加载失败')
	}

	// 头像加载失败处理
	const onAvatarError = () => {
		console.log('用户头像加载失败，使用默认头像')
	}
</script>

<style lang="scss" scoped>
	.post-item {
		width: 100%;
		margin-bottom: 0; // 移除底部边距，由父容器的gap控制
		cursor: pointer;
		background: white;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.post-image {
			position: relative;
			width: 100%;

			image {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 16rpx 16rpx 0 0;
			}

			.gradient-image {
				width: 100%;
				height: 200rpx;
				background: linear-gradient(180deg, #1C2D41 0%, #546366 100%);
				border-radius: 16rpx 16rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					content: '暂无图片';
					color: #fff;
					font-size: 24rpx;
					opacity: 0.7;
				}
			}

			// 图片数量标识
			.image-count {
				position: absolute;
				top: 8rpx;
				right: 8rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 12rpx;
				padding: 4rpx 8rpx;
				display: flex;
				align-items: center;
				gap: 4rpx;

				.count-text {
					color: #fff;
					font-size: 20rpx;
					font-weight: 500;
				}
			}
		}

		.post-info {
			padding: 20rpx;

			.post-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 12rpx;
				line-height: 1.4;
				// 限制显示行数
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.post-content {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 16rpx;
				line-height: 1.4;
				// 限制显示行数
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.post-stats {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8rpx;
				padding: 8rpx 0;

				.creator-info {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.creator-avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: 1rpx solid #eee;
					}

					.creator-label {
						font-size: 24rpx;
						color: #999;
					}

					.creator-name {
						font-size: 24rpx;
						color: #333;
						font-weight: 500;
					}
				}

				.like-info {
					display: flex;
					align-items: center;

					.stat-item {
						display: flex;
						align-items: center;
						gap: 4rpx;

						.icon {
							font-size: 28rpx;
							transition: all 0.3s ease;
						}

						.icon.liked {
							color: #ff6b6b;
							transform: scale(1.1);
						}

						.count {
							font-size: 24rpx;
							color: #666;
						}
					}
				}
			}
		}
	}
</style>